<template>
  <div class="app">
	  <h2 ref="h" class="person">Hello Vue!</h2>
	  <button @click="getAppMsg()">app中的button</button>
	  <Person ref="ren"></Person>
	  <button @click="getPerson">获取组件的内容</button>
  </div>
</template>
<script lang="ts" setup name="App">
// 导入要引用的组件
import { ref } from 'vue';
import Person from './components/Person.vue';
	let h=ref()
	let ren=ref()
	function getAppMsg(){
	console.log(h.value)
	}
	// ref属性作用在组件上时，默认获取的是组件的实例，
	// 如果想要获取子组件中的数据，需要再子组件中使用defineExpose将要展示的数据暴露出来
	function getPerson(){
		console.log(ren.value)
		console.log(ren.value.name)
		console.log(ren.value.age)
	}

</script>

<style>
.app{
	background-color: lightgray;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;
}
</style>
